import { DirectiveBinding } from 'vue'
import { fangdouUtil } from '@/util/util'
const styleDirective = (el: HTMLDivElement, bind: DirectiveBinding) => {
  const color = bind.value
  const w = el.getBoundingClientRect().width
  const h = el.getBoundingClientRect().height
  el.style.position = 'relative'
  el.style.overflow = 'hidden'
  let outBox = getOutBoxDom(w, h)
  let BoLang = getBoLangDom(color)
  el.appendChild(outBox)

  // @ts-ignore
  // const resizeObserver = new ResizeObserver(() => {
  //   el.removeChild(outBox)
  //   const width = el.getBoundingClientRect().width
  //   const height = el.getBoundingClientRect().height
  //   outBox = getOutBoxDom(width, height)
  //   outBox.appendChild(BoLang)
  //   el.appendChild(outBox)
  // })
  // resizeObserver.observe(el)

  outBox.appendChild(BoLang)
  el.appendChild(outBox)
  el.addEventListener(
    'mousedown',
    (e) => {
      //   outBox.style.zIndex = '1'

      const x = e.offsetX
      const y = e.offsetY
      fangdouUtil(
        () => changeLocation(BoLang, y, x),
        1000,
        () => {
          BoLang.style.animation = ''
          BoLang.style.display = 'none'
        }
      )
    },
    true
  )
}
const changeLocation = (div: HTMLDivElement, top: number = 0, left: number = 0) => {
  div.style.display = 'block'
  div.style.top = top + 'px'
  div.style.left = left + 'px'
  let style = document.styleSheets[0]
  style.insertRule(`@keyframes secondrotate
        {
            0%{
                z-index: 1;
                opacity:1;
                transform:scale(1)
            }
            100%
            {transform:scale(120); opacity:0;}
        }`)
  div.style.animation = `secondrotate 1s ease`
}
const getBoLangDom = (color: string) => {
  let div = document.createElement('div')
  div.style.width = '10px'
  div.style.height = '10px'
  div.style.zIndex = '-1'
  div.style.opacity = '0'
  div.style.borderRadius = '10px'
  div.style.backgroundColor = color || 'red'
  ;(div.style.position = 'absolute'), (div.style.top = '0')
  div.style.left = '0'

  return div
}
const getOutBoxDom = (width: number, height: number) => {
  let div = document.createElement('div')
  // div.style.width = width + 'px'
  // div.style.height = height + 'px'
  div.style.position = 'absolute'
  div.style.top = '0'
  div.style.left = '0'
  div.style.right = '0'
  div.style.bottom = '0'

  div.style.overflow = 'hidden'
  div.style.zIndex = '1'
  return div
}
export default styleDirective
